<template>
  <div>
    <div class="lm_filter">
      <el-input
        v-model="search.loginName"
        placeholder="请输入登录名"
      ></el-input>
      <el-select v-model="search.active" placeholder="请选择是否有效">
        <el-option :value="''" label="全部"></el-option>
        <el-option :value="1" label="是"></el-option>
        <el-option :value="0" label="否"></el-option>
      </el-select>
      <el-button
        type="primary"
        round
        plain
        icon="el-icon-search"
        @click="find()"
        >查询</el-button
      >
      <el-button
        type="primary"
        round
        icon="el-icon-circle-plus-outline"
        @click="save()"
        >添加用户</el-button
      >
      <el-button type="danger" @click="batchDel()" plain>批量删除</el-button>
    </div>
    <el-table 
      :data="result.table" 
      style="width: 100%"
      @selection-change="changeselection"
    >
      <el-table-column 
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column 
        label="ID" 
        prop="id" 
        width="80">
      </el-table-column>
      <el-table-column 
        label="姓名" 
        prop="name" 
        width="120"
      ></el-table-column>
      <el-table-column 
        label="登录名" 
        prop="loginName"
      ></el-table-column>
      <el-table-column 
        label="邮箱" 
        prop="email"
      ></el-table-column>
      <el-table-column 
        label="手机号" 
        prop="phone"
      ></el-table-column>
      <el-table-column 
        label="是否有效" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.active === 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        label="最后一次登录时间"
        prop="lasttime"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
			<template v-if="scope.row.active === 1">
				<el-button
					@click="edit(scope.row.id)"
					type="primary"
					size="mini"
					plain
				>修改</el-button>
				<el-button 
					type="danger" 
					size="mini" 
					plain 
					@click="del(scope.row.id,0)"
				>删除</el-button>
			</template>
			<template v-else>
				<el-button
					type="success"
					size="mini"
					plain
					@click="del(scope.row.id,1)"
				>恢复</el-button>
			</template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :page-count="result.pages"
      :current-page.sync="params.pageNo"
    >
    </el-pagination>
    <el-dialog
      :title="editdialog.title"
      :visible.sync="editdialog.show"
      :close-on-click-modal="false"
    >
      <UserEdit
        v-if="editdialog.show"
        :dialogshow.sync="editdialog.show"
        @getTable="getTable()"
        :editId="editdialog.id"
      ></UserEdit>
    </el-dialog>
  </div>
</template>

<script>
import UserEdit from "./edit";
export default {
  name: "",
  components: {
    UserEdit,
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 9,
        loginName: "",
        active: "",
      },
      search: {
        loginName: "",
        active: "",
      },
      result: {
        pages: 0,
        table: [],
      },
      editdialog: {
        title: "编辑用户信息",
        show: false,
        id: null
      },
      ids: []
    };
  },
  created() {
    this.getTable()
  },
  watch: {
    params: {
      handler: function () {
        this.getTable()
      },
      deep: true,
    },
  },
  methods: {
    getTable() {
      this.$axios.get("/ums-user/list", this.params, (response) => {
        this.result.pages = response.obj.pages
        this.result.table = response.obj.records
      });
    },
    find() {
      this.params.loginName = this.search.loginName
      this.params.active = this.search.active
      this.params.pageNo = 1
    },
    save() {
      this.editdialog.id = null
      this.editdialog.show = true
      this.editdialog.title = '添加用户信息'
    },
    del(id,active) {
      this.$axios.del('/ums-user/del',{
        id: id,
        active: active
      },'get',() => {
        this.getTable()
      })
    },
    changeselection(selection) {
      this.ids = []
      for(let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].id)
      }
      console.log(this.ids)
    },
    batchDel() {
      this.$axios.del('/ums-user/batchDel',{
        ids: this.ids,
        active: 0
      },'post',() => {
        this.getTable()
      })
    },
    edit(id) {
      this.editdialog.show = true
      this.editdialog.title = '修改用户信息'
      this.editdialog.id = id
    }
   
  },
};
</script>

<style>
</style>
